<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  <style>
    .main {
      width: 600px;
      margin: 100px auto;
    }
    h1 {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="main">
      <h1>登录页面</h1>

      <div class="mb-3">
        <label for="username" class="form-label">用户名</label>
        <input type="text" class="form-control" id="username" placeholder="用户名">
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">密码</label>
        <input type="password" class="form-control" id="password" placeholder="密码">
      </div>
      <div class="mb-3 d-grid gap-2">
        <button class="btn btn-primary login-button" type="button">登录</button>
      </div>
    </div>
  </div>
  
  <script>
    const usernameInput = document.querySelector("#username")
    const passwordInput = document.querySelector("#password")

    document.querySelector(".login-button").onclick = () => {
      fetch("http://127.0.0.1:3000/api/admin/login", {
        method: "POST",
        headers: {"content-type": "application/json"},
        body: JSON.stringify({
          username: usernameInput.value,
          password: passwordInput.value
        })
      }).then(response => response.json())
      .then(res => {
        if (res.success) {
          // 登录成功以后要把后端生成的token存下来
          localStorage.setItem("token", res.token)
          location.href = "./index.html"
        } else {
          console.log(res.msg);
        }
        
      })
    }
  </script>
</body>
</html>